CSS கட்ட கட்டமைப்பு வரிசைப்படுத்தலை மாஸ்டரிங் செய்தல்: கட்ட உருப்படி நிலைப்படுத்தலின் துல்லியம்

CSS கட்டம் இணைய தளவமைப்பு வடிவமைப்பை மாற்றியமைத்துள்ளது, நமது உள்ளடக்கத்தை எவ்வாறு கட்டமைப்பது என்பது குறித்த இணையற்ற நெகிழ்வுத்தன்மை மற்றும் கட்டுப்பாட்டை வழங்குகிறது. CSS கட்டத்தின் மிக சக்திவாய்ந்த அம்சங்களில் ஒன்று, அதன் நியமிக்கப்பட்ட பகுதிகளில் கட்ட உருப்படிகளைத் துல்லியமாகக் கட்டுப்படுத்தும் திறன் ஆகும். இது ட்ராக் சீரமைப்பு என்ற கருத்தின் மூலம் அடையப்படுகிறது, இது உள்-வரிசை (கிடைமட்ட) மற்றும் தொகுதி (செங்குத்து) அச்சுகளில் உருப்படி சீரமைப்பைக் கையாள வடிவமைக்கப்பட்ட பண்புகளின் தொகுப்பாகும். இந்த வலைப்பதிவு இடுகை, உலகளாவிய பார்வையாளர்களுக்காக பார்வைக்கு பிரமிக்க வைக்கும் மற்றும் மிகச் சிறந்த செயல்பாட்டு வலை தளவமைப்புகளை உருவாக்க CSS கட்ட கட்டமைப்பு வரிசைப்படுத்தலைப் புரிந்துகொள்வதற்கும் பயன்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியாக செயல்படுகிறது.

முக்கிய கருத்துகளைப் புரிந்துகொள்வது

குறிப்பிட்ட பண்புகளில் நுழைவதற்கு முன், CSS கட்டம் தளவமைப்பு இடத்தை எவ்வாறு வரையறுக்கிறது மற்றும் கட்டுப்படுத்துகிறது என்ற அடிப்படைக் கருத்துகளைப் புரிந்து கொள்வது முக்கியம். ஒரு கட்டம் அடிப்படையில் இரண்டு பரிமாண அமைப்பு, வரிசைகள் மற்றும் நெடுவரிசைகளால் ஆனது. கட்ட உருப்படிகள் பின்னர் இந்த வரிசைகள் மற்றும் நெடுவரிசைகளின் வெட்டுக்களால் உருவாகும் செல்களில் வைக்கப்படுகின்றன. ட்ராக் சீரமைப்புப் பண்புகள் இந்த கட்ட உருப்படிகள் அவற்றின் செல்களில் எவ்வாறு நிலைநிறுத்தப்படுகின்றன மற்றும் முழு கட்டமும் அதன் கொள்கலனில் எவ்வாறு சீரமைக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்த அனுமதிக்கின்றன.

ட்ரக் சீரமைப்பைப் புரிந்துகொள்வதற்கான திறவுகோல் கட்ட உருப்படிகள் மற்றும் கட்ட கொள்கலன் ஆகியவற்றுக்கு இடையேயான வேறுபாட்டை அங்கீகரிப்பதாகும். சீரமைப்புப் பண்புகள், பொருட்களின் இருப்பிடத்தை பாதிக்க கட்ட கொள்கலனுக்குப் பயன்படுத்தப்படுகின்றன. சீரமைப்புப் பண்புகள் இரண்டு முக்கிய வகைகளாகப் பிரிக்கப்பட்டுள்ளன: தனிப்பட்ட உருப்படிகளை பாதிப்பவை மற்றும் முழு கட்டப் பாதையையும் பாதிப்பவை.

முக்கிய சொற்கள்

• கட்ட கொள்கலன்: `display: grid;` அல்லது `display: inline-grid;` பயன்படுத்தப்படும் உறுப்பு.
• கட்ட உருப்படி: கட்ட கொள்கலனின் நேரடி குழந்தைகள்.
• ட்ராக்: கட்டத்தில் ஒரு வரிசை அல்லது ஒரு நெடுவரிசை.
• செல்: ஒரு வரிசை மற்றும் ஒரு நெடுவரிசையின் வெட்டு. ஒரு கட்ட உருப்படி ஒன்று அல்லது அதற்கு மேற்பட்ட செல்களை ஆக்கிரமிக்கிறது.
• உள் வரிசை அச்சு (கிடைமட்ட): கட்டத்தின் கிடைமட்ட பரிமாணத்தை பிரதிபலிக்கிறது.
• தொகுதி அச்சு (செங்குத்து): கட்டத்தின் செங்குத்து பரிமாணத்தை பிரதிபலிக்கிறது.

தனிப்பட்ட கட்ட உருப்படிகளை சீரமைத்தல்

இந்த பண்புகள் அந்தந்த கட்டப் பகுதிகளில் (செல்கள்) தனிப்பட்ட கட்ட உருப்படிகளின் சீரமைப்பைக் கட்டுப்படுத்துகின்றன. அவை உருப்படி நிலைப்படுத்தல் மீது சிறந்த கட்டுப்பாட்டை வழங்குகின்றன.

1. `align-items`

`align-items` சொத்து, கட்ட கொள்கலனுக்குப் பயன்படுத்தப்பட்டு, கட்ட உருப்படிகளை அவற்றின் கட்டப் பகுதிகளில் தொகுதி (செங்குத்து) அச்சில் சீரமைக்கிறது. கட்ட உருப்படிகள் வெவ்வேறு உயரங்களைக் கொண்டிருக்கும்போது அல்லது அவற்றின் செங்குத்து நிலைப்படுத்தலைக் கட்டுப்படுத்த விரும்பும் போது இது குறிப்பாக பயனுள்ளதாக இருக்கும். இயல்புநிலை மதிப்பு `stretch`, இது உருப்படிகளை அவற்றின் கட்டப் பகுதியின் முழு உயரத்தையும் நிரப்பச் செய்கிறது. வெவ்வேறு மதிப்புகள் மற்றும் அவற்றின் நடத்தைகள் கீழே விளக்கப்பட்டுள்ளன, விளக்க எடுத்துக்காட்டுகளுடன்.

• `stretch` (இயல்புநிலை): உருப்படிகள் கட்டப் பகுதியின் உயரத்தை நிரப்ப நீண்டு செல்லும். இது இயல்புநிலை நடத்தை.
• `start`: உருப்படிகள் கட்டப் பகுதியின் மேல் பகுதியில் சீரமைக்கப்படுகின்றன.
• `end`: உருப்படிகள் கட்டப் பகுதியின் அடிப்பகுதியில் சீரமைக்கப்படுகின்றன.
• `center`: உருப்படிகள் கட்டப் பகுதியில் செங்குத்தாக மையப்படுத்தப்பட்டுள்ளன.
• `baseline`: உருப்படிகள் அவற்றின் அடிப்பகுதியில் அடிப்படையில் சீரமைக்கப்படுகின்றன. உருப்படிகள் உரையை உள்ளடக்கியிருக்கும்போது மற்றும் அவற்றின் உரை அடிப்படைகளை சீரமைக்க விரும்பும் போது இது பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  align-items: center; /* Vertically center items */
  border: 1px solid black;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `.grid-container` க்குள் உள்ள அனைத்து கட்ட உருப்படிகளும் அவற்றின் அந்தந்த செல்களுக்குள் செங்குத்தாக மையப்படுத்தப்படும். உள்ளடக்கத்தின் உயரம் எதுவாக இருந்தாலும், உருப்படிகள் எப்போதும் நடுவில் சீரமைக்கப்படும்.

2. `justify-items`

`justify-items` சொத்து, கட்ட கொள்கலனுக்குப் பயன்படுத்தப்பட்டு, கட்ட உருப்படிகளை அவற்றின் கட்டப் பகுதிகளில் உள்-வரிசை (கிடைமட்ட) அச்சில் சீரமைக்கிறது. இது `align-items` இன் செயல்பாட்டை பிரதிபலிக்கிறது, ஆனால் கிடைமட்ட பரிமாணத்திற்குப் பொருந்தும்.

• `stretch` (இயல்புநிலை): உருப்படிகள் கட்டப் பகுதியின் அகலத்தை நிரப்ப நீண்டு செல்லும்.
• `start`: உருப்படிகள் கட்டப் பகுதியின் இடதுபுறத்தில் சீரமைக்கப்படுகின்றன.
• `end`: உருப்படிகள் கட்டப் பகுதியின் வலதுபுறத்தில் சீரமைக்கப்படுகின்றன.
• `center`: உருப்படிகள் கட்டப் பகுதியில் கிடைமட்டமாக மையப்படுத்தப்பட்டுள்ளன.
• `baseline`: உருப்படிகள் அவற்றின் அடிப்பகுதியில் அடிப்படையில் சீரமைக்கப்படுகின்றன. இது கிடைமட்டமாக குறைவாகப் பயனுள்ளதாக இருக்கும், ஆனால் உள்ளடக்கத்துடன் கூடிய உறுப்புகளுக்குப் பயன்படுத்தலாம்.

எடுத்துக்காட்டு:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px;
  justify-items: center; /* Horizontally center items */
  border: 1px solid black;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
}
            

              
                Copy
              
            
          

இங்கே, அனைத்து கட்ட உருப்படிகளும் அவற்றின் கட்ட செல்களுக்குள் கிடைமட்டமாக மையப்படுத்தப்பட்டுள்ளன.

3. தனிப்பட்ட உருப்படிகளுக்கான `align-items` மற்றும் `justify-items` ஐ மேலெழுதுதல்

`align-items` மற்றும் `justify-items` பண்புகளை தனிப்பட்ட கட்ட உருப்படிகளுக்கு `align-self` மற்றும் `justify-self` பண்புகளைப் பயன்படுத்தி மேலெழுதுவது சாத்தியமாகும். இது கட்டத்திற்குள் உருப்படி நிலைப்படுத்தலின் மீதும் இன்னும் சிறந்த கட்டுப்பாட்டை அனுமதிக்கிறது.

• `align-self`: கட்ட கொள்கலனில் அமைக்கப்பட்டுள்ள `align-items` மதிப்பை மேலெழுதுவதன் மூலம், ஒரு ஒற்றை கட்ட உருப்படியை தொகுதி அச்சில் சீரமைக்கிறது.
• `justify-self`: கட்ட கொள்கலனில் அமைக்கப்பட்டுள்ள `justify-items` மதிப்பை மேலெழுதுவதன் மூலம், ஒரு ஒற்றை கட்ட உருப்படியை உள்-வரிசை அச்சில் சீரமைக்கிறது.

எடுத்துக்காட்டு:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  align-items: center;
  justify-items: start;
  border: 1px solid black;
}

.grid-item:nth-child(2) {
  align-self: end;
  justify-self: center;
  background-color: lightblue;
}
            

              
                Copy
              
            
          

இந்த விஷயத்தில், கட்ட கொள்கலனில் `align-items` சொத்து `center` என அமைக்கப்பட்டிருந்தாலும், இரண்டாவது கட்ட உருப்படி (`.grid-item:nth-child(2)`) அடிப்பகுதியில் (`align-self: end`) சீரமைக்கப்படும் மற்றும் கிடைமட்டமாக மையப்படுத்தப்படும் (`justify-self: center`).

முழு கட்ட பாதையையும் சீரமைத்தல்

இந்த பண்புகள் அதன் கொள்கலனுக்குள் முழு கட்டத்தின் சீரமைப்பை நிர்வகிக்கின்றன, காட்சி இடைவெளி மற்றும் வடிவமைப்புத் தேர்வுகளை உருவாக்குகின்றன.

1. `align-content`

`align-content` சொத்து, கட்ட கொள்கலனுக்குப் பயன்படுத்தப்பட்டு, கட்ட கொள்கலனில் கூடுதல் இடம் இருக்கும்போது, ​​தொகுதி (செங்குத்து) அச்சில் கட்ட தடங்களை சீரமைக்கிறது. இது `align-items` போலவே செயல்படுகிறது, ஆனால் தனிப்பட்ட உருப்படிகளைப் பாதிப்பதற்குப் பதிலாக, இது முழு கட்டத்தின் செங்குத்து நிலையை பாதிக்கிறது. கட்ட உருப்படிகள் மற்றும் அவற்றின் கால்வாய்களின் கூட்டு உயரத்தை விட பெரிய உயரம் (எ.கா., `grid-template-rows` மற்றும் கட்ட கொள்கலனில் `height` ஐப் பயன்படுத்துதல்) குறிப்பிட்ட உயரம் கொண்ட கட்டம் இருக்கும்போது இது தெரியும்.

• `stretch` (இயல்புநிலை): கட்ட தடங்கள் கூடுதல் இடத்தை நிரப்ப நீண்டு செல்லும்.
• `start`: கட்ட தடங்கள் கட்ட கொள்கலனின் மேல் பகுதியில் சீரமைக்கப்படுகின்றன.
• `end`: கட்ட தடங்கள் கட்ட கொள்கலனின் அடிப்பகுதியில் சீரமைக்கப்படுகின்றன.
• `center`: கட்ட தடங்கள் கட்ட கொள்கலனில் செங்குத்தாக மையப்படுத்தப்பட்டுள்ளன.
• `space-around`: கூடுதல் இடம் கட்ட தடங்களைச் சுற்றி விநியோகிக்கப்படுகிறது.
• `space-between`: கூடுதல் இடம் கட்ட தடங்களுக்கு இடையில் விநியோகிக்கப்படுகிறது.
• `space-evenly`: கூடுதல் இடம் கட்ட தடங்களைச் சுற்றி மற்றும் இடையே சமமாக விநியோகிக்கப்படுகிறது.

எடுத்துக்காட்டு:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  height: 500px; /* Grid container has a defined height */
  align-content: center;
  border: 1px solid black;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
}
            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், கட்ட கொள்கலன் வரிசைகளுக்குள் உள்ள உள்ளடக்கத்தை விட உயரமானது என்பதால், கட்ட உருப்படிகள் பெரிய கொள்கலனுக்குள் செங்குத்தாக மையப்படுத்தப்படும். கட்ட தடங்களுக்கு மேலே மற்றும் கீழே உள்ள வெற்று இடம் முழு கட்டத்தையும் மையப்படுத்த சமமாக விநியோகிக்கப்படும். கட்ட கொள்கலன் கட்ட உள்ளடக்கத்தின் அதே அளவாக இருந்தால் `align-content` எதுவும் செய்யாது. அது செயல்பட கூடுதல் செங்குத்து இடத்தை தேவைப்படுகிறது.

2. `justify-content`

`justify-content` சொத்து, கட்ட கொள்கலனுக்குப் பயன்படுத்தப்பட்டு, உள்-வரிசை (கிடைமட்ட) அச்சில் கட்ட தடங்களை சீரமைக்கிறது, `align-content` தொகுதி அச்சில் சீரமைக்கும் அதே வழியில். `align-content` போல, இது கட்ட கொள்கலனுக்குள் கூடுதல் இடம் இருக்கும்போது தொடர்புடையதாகிறது, பொதுவாக கட்ட கொள்கலன் உள்ளடக்கத்தை விட அகலமாக இருப்பதால், அல்லது `grid-template-columns` பண்பில் `fr` போன்ற நெகிழ்வான அலகுகளைப் பயன்படுத்துகிறது.

• `start`: கட்ட தடங்கள் கட்ட கொள்கலனின் இடதுபுறத்தில் சீரமைக்கப்படுகின்றன.
• `end`: கட்ட தடங்கள் கட்ட கொள்கலனின் வலதுபுறத்தில் சீரமைக்கப்படுகின்றன.
• `center`: கட்ட தடங்கள் கட்ட கொள்கலனில் கிடைமட்டமாக மையப்படுத்தப்பட்டுள்ளன.
• `space-around`: கூடுதல் இடம் கட்ட தடங்களைச் சுற்றி விநியோகிக்கப்படுகிறது.
• `space-between`: கூடுதல் இடம் கட்ட தடங்களுக்கு இடையில் விநியோகிக்கப்படுகிறது.
• `space-evenly`: கூடுதல் இடம் கட்ட தடங்களைச் சுற்றி மற்றும் இடையே சமமாக விநியோகிக்கப்படுகிறது.

எடுத்துக்காட்டு:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px;
  width: 500px; /* Grid container has a defined width */
  justify-content: center;
  border: 1px solid black;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
}
            

              
                Copy
              
            
          

இங்கே, கட்ட தடங்கள் மொத்தம் 300px அகலம் (3 நெடுவரிசைகள் * ஒவ்வொன்றும் 100px). கட்ட கொள்கலன் 500px அகலம் கொண்டது, 200px கூடுதல் இடத்தை விட்டு விடுகிறது. `justify-content: center` கொள்கலனுக்குள் முழு கட்டத்தையும் கிடைமட்டமாக மையப்படுத்தும், இருபுறமும் 100px இடைவெளியை வைக்கும்.

நடைமுறை பயன்பாடுகள் மற்றும் உலகளாவிய எடுத்துக்காட்டுகள்

கட்ட சீரமைப்புப் பண்புகள் பதிலளிக்கக்கூடிய மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய தளவமைப்புகளை உருவாக்குவதற்கு நம்பமுடியாத அளவிற்கு பல்துறை மற்றும் முக்கியமானவை. உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கப்பட்ட சில நடைமுறை பயன்பாடுகள் இங்கே:

1. வழிசெலுத்தல் மெனுக்கள் (கிடைமட்ட & செங்குத்து)

CSS கட்டம் அதிநவீன வழிசெலுத்தல் மெனுக்களை அனுமதிக்கிறது. எடுத்துக்காட்டாக, `justify-items: center` ஐப் பயன்படுத்தி இணைப்புகள் அவற்றின் கட்ட செல்களுக்குள் மையப்படுத்தப்படும் கிடைமட்ட வழிசெலுத்தல் மெனுவை உருவாக்குதல். அல்லது, வெவ்வேறு திரை அளவுகளுக்குப் பதிலளிக்கக்கூடிய செங்குத்து வழிசெலுத்தல் மெனுவுக்கு, செல்களுக்குள் வழிசெலுத்தல் உருப்படிகளை செங்குத்தாக மையப்படுத்த `align-items: center` ஐப் பயன்படுத்தலாம். அரேபியம் அல்லது ஹீப்ரு போன்ற வலமிருந்து-இடது மொழிகள் உள்ள பிராந்தியங்களில் உள்ள வலைத்தளங்களுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும், இது தளவமைப்பின் எளிதான பிரதிபலிப்பை அனுமதிக்கிறது.

2. பட கேலரிகள்

படம் கேலரிகள் மற்றொரு பொதுவான பயன்பாட்டு நிகழ்வு. `align-items` மற்றும் `justify-items` ஐப் பயன்படுத்தி, அவற்றின் விகிதம் அல்லது கிடைக்கும் இடம் எதுவாக இருந்தாலும், படங்கள் அவற்றின் கட்ட செல்களுக்குள் சீராக மையப்படுத்தப்படுவதை உறுதிசெய்யலாம். இது ஒரு நிலையான காட்சி அனுபவத்திற்கு முக்கியமானது, குறிப்பாக பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் வலைத்தளத்தை அணுகும் பயனர்களுக்கும், உலகின் பல்வேறு பிராந்தியங்களைச் சேர்ந்தவர்களுக்கும். உதாரணமாக, புகைப்பட கேலரியில் பயனர் உருவாக்கிய உள்ளடக்கம் இருக்கலாம், மேலும் `align-items: center` வெவ்வேறு மூலங்களிலிருந்து வரும் உள்ளடக்கத்தில், படத்தின் பரிமாணங்கள் அல்லது நோக்குநிலை எதுவாக இருந்தாலும், ஒரு நிலையான அனுபவத்தை வழங்கும்.

3. தயாரிப்பு பட்டியல்கள்

தயாரிப்பு பட்டியல்களைக் காண்பிக்கும்போது, ​​தயாரிப்பு தலைப்புகள், விலைகள் மற்றும் விளக்கங்களின் சீரான செங்குத்து சீரமைப்பை உறுதி செய்வது தொழில்முறை தோற்றத்திற்கு முக்கியமானது. `align-items: start`, `center`, அல்லது `end` ஐப் பயன்படுத்துவது, தயாரிப்பு அட்டைகளில் தகவல்கள் எவ்வாறு சீரமைக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்துகிறது, இது பயனர் அனுபவத்தை மேம்படுத்தும் சுத்தமான மற்றும் ஒழுங்கமைக்கப்பட்ட விளக்கத்தை ஊக்குவிக்கிறது, மேலும் உலகளாவிய சந்தைகளுக்கான இ-காமர்ஸ் தளங்களுக்கு எளிதாக மாற்றியமைக்க முடியும்.

4. படிவ தளவமைப்புகள்

பதிலளிக்கக்கூடிய படிவ தளவமைப்புகளை உருவாக்குவதில் CSS கட்டம் சிறந்து விளங்குகிறது. `align-items` மற்றும் `justify-items` ஐப் பயன்படுத்துவது படிவ கூறுகள், லேபிள்கள் மற்றும் உள்ளீட்டு புலங்களின் இடத்தைக் கட்டுப்படுத்த உதவுகிறது, வடிவமைப்பாளர்கள் பல்வேறு திரை அளவுகள் மற்றும் சர்வதேச மொழித் தேவைகளுக்கு தடையின்றி மாற்றியமைக்கும் படிவங்களை உருவாக்க உதவுகிறது. உதாரணமாக, லேபிள்கள் மற்றும் உள்ளீட்டு புலங்களுக்கு மொழி திசையின் அடிப்படையில் வெவ்வேறு காட்சி சிகிச்சைகள் தேவைப்படலாம்; `justify-items` இடமிருந்து-வலமாக மற்றும் வலமிருந்து-இடமாக தளவமைப்புகளுக்கு எளிதாக சரிசெய்ய உதவுகிறது, பல்வேறு மொழி குழுக்களுக்கு இடமளிக்கிறது.

5. வலைத்தள தலைப்பு/அடிக்குறிப்பு

தலைப்புகள் மற்றும் அடிக்குறிப்புகள் பெரும்பாலும் கட்ட அடிப்படையிலான தளவமைப்புகளுக்கு சரியான வேட்பாளர்களாகும். நீங்கள் தலைப்பில் `justify-items: center` ஐப் பயன்படுத்தி ஒரு லோகோவை மையப்படுத்தலாம், மேலும் பதிப்புரிமை தகவல் மற்றும் சமூக ஊடக சின்னங்கள் போன்ற அடிக்குறிப்பு உள்ளடக்கம், மொழி அல்லது இருப்பிடத்தைப் பொறுத்து உள்ளடக்கம் மாறினாலும், சீராக சீரமைக்கப்படுவதை உறுதி செய்யலாம். உலகளவில் சீரமைப்பைக் கட்டுப்படுத்தும் திறன் உலகளவில் பயனர்களுக்கு நிலைத்தன்மை மற்றும் தெளிவை உறுதி செய்கிறது.

பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் மீடியா வினவல்கள்

CSS கட்ட ட்ராக் சீரமைப்பின் உண்மையான சக்தி மீடியா வினவல்களுடன் இணைந்திருக்கும்போது வெளிப்படுகிறது. மீடியா வினவல்களானது, பயனரின் திரை அளவு அல்லது சாதனத்தின் அடிப்படையில் சீரமைப்புப் பண்புகளைச் சரிசெய்ய உங்களை அனுமதிக்கிறது, உண்மையிலேயே பதிலளிக்கக்கூடிய வடிவமைப்பை உருவாக்குகிறது. உலகம் முழுவதும் பரவலான சாதனங்களிலிருந்து அணுகப்படும் வலைத்தளங்களுக்கு இது குறிப்பாக முக்கியமானது. உதாரணமாக, சிறிய திரைகளில் வழிசெலுத்தல் மெனுவின் `justify-content` சொத்தை பெரிய திரைகளில் `center` இலிருந்து `space-between` ஆக மாற்ற மீடியா வினவல்களைப் பயன்படுத்தலாம், மொபைல் சாதனங்களில் பயன்பாட்டினை மேம்படுத்துகிறது.

எடுத்துக்காட்டு:

            
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
  justify-content: center; /* Default for larger screens */
}

@media (max-width: 768px) {
  .grid-container {
    justify-content: space-around; /* Adjust for smaller screens */
  }
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டு `justify-content` சொத்து திரை அகலத்தைப் பொறுத்து எவ்வாறு மாறுகிறது என்பதை நிரூபிக்கிறது. இந்த தகவமைப்பு உலகளவில் பயனர்களுக்கு உகந்த அனுபவத்தை வழங்குவதற்கு அவசியமானது.

அணுகல்தன்மை பரிசீலனைகள்

CSS கட்டம் அதிக தளவமைப்பு நெகிழ்வுத்தன்மையை வழங்கினாலும், அணுகல்தன்மையை கருத்தில் கொள்வது அவசியம். நீங்கள் தேர்ந்தெடுக்கும் சீரமைப்பு, ஊனமுற்ற பயனர்களுக்காக உங்கள் வலைத்தளத்தின் பயன்பாட்டை எதிர்மறையாக பாதிக்காது என்பதை உறுதிப்படுத்தவும்.

• போதுமான மாறுபாட்டை வழங்குதல்: எளிதில் படிக்கக்கூடிய வகையில் உரை மற்றும் ஊடாடும் கூறுகளுக்கு அவற்றின் பின்னணியுடன் போதுமான மாறுபாடு இருப்பதை உறுதிப்படுத்தவும். `align-items` மற்றும் `justify-items` பண்புகளை முறையாகப் பயன்படுத்துவது நல்ல படிக்கக்கூடிய தன்மையை வழங்க உதவும்.
• சிமாண்டிக் HTML ஐப் பயன்படுத்துங்கள்: உங்கள் உள்ளடக்கத்திற்கு அர்த்தத்தையும் கட்டமைப்பையும் வழங்க, சிமாண்டிக் HTML கூறுகளைப் பயன்படுத்தி உங்கள் உள்ளடக்கத்தை கட்டமைக்கவும் (எ.கா., `
• திரை வாசகியுடன் சோதிக்கவும்: உங்கள் உள்ளடக்கத்தை அணுகக்கூடியதா என்பதை உறுதிப்படுத்த, உங்கள் வலைத்தளத்தை ஒரு திரை வாசகியுடன் தொடர்ந்து சோதிக்கவும். உள்ளடக்கத்தின் வரிசை தர்க்கரீதியானது மற்றும் அனைத்து ஊடாடும் கூறுகளும் அணுகக்கூடியவை என்பதைச் சரிபார்க்கவும்.
• உரை அளவை கருத்தில் கொள்ளவும்: உங்கள் தளவமைப்புகள் உரை அளவை அழகாகக் கையாள முடியும் என்பதை உறுதிப்படுத்தவும். வெவ்வேறு உலாவிகள் மற்றும் இயக்க முறைமைகளில் சோதனை செய்வது இணக்கத்தன்மை சிக்கல்களையும் வெளிப்படுத்தக்கூடும், எனவே குறுக்கு-தள சோதனை உலகளாவிய இணக்கத்திற்கு முக்கியமானது.

சிறந்த நடைமுறைகள் மற்றும் உதவிக்குறிப்புகள்

CSS கட்ட கட்டமைப்பு வரிசைப்படுத்தலின் செயல்திறனை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• உங்கள் தளவமைப்பைத் திட்டமிடுங்கள்: குறியீட்டை எழுதுவதற்கு முன், நீங்கள் விரும்பிய தளவமைப்பை ஸ்கெட்ச் செய்யுங்கள். இது ட்ராக் சீரமைப்பு பண்புகளை சிறப்பாகப் பயன்படுத்த உதவும்.
• இயல்புநிலை மதிப்புகளுடன் தொடங்கவும்: `align-items` மற்றும் `justify-items`க்கான இயல்புநிலை மதிப்புகள் பெரும்பாலும் ஒரு நல்ல தொடக்க புள்ளியை வழங்குகின்றன. நீங்கள் விரும்பிய காட்சி விளைவை அடைய தேவைக்கேற்ப அவற்றை சரிசெய்யவும்.
• டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்: உங்கள் கட்டத்தை ஆய்வு செய்யவும், வெவ்வேறு சீரமைப்பு பண்புகளைப் பரிசோதிக்கவும் உங்கள் உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தவும். இது ஒவ்வொரு சொத்து மாற்றத்தின் விளைவை காட்சிப்படுத்துவதை எளிதாக்குகிறது.
• வெவ்வேறு சாதனங்களில் சோதிக்கவும்: பதிலளிக்கக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிசெய்ய, பல்வேறு சாதனங்கள் மற்றும் திரை அளவுகளில் உங்கள் தளவமைப்புகளை முழுமையாகச் சோதிக்கவும். வெவ்வேறு உலகளாவிய பிராந்தியங்களில் பொதுவான பல்வேறு சாதனங்களில் சோதனை செய்வதைக் கவனியுங்கள்.
• உங்கள் குறியீட்டை கருத்துரையிடுங்கள்: உங்கள் சீரமைப்புப் பண்புகளின் நோக்கத்தை விளக்க உங்கள் CSS க்கு கருத்துகளைச் சேர்க்கவும். இது உங்கள் குறியீட்டைப் புரிந்துகொள்வதையும் பராமரிப்பதையும் எளிதாக்குகிறது.
• எளிமையாக வைத்திருங்கள்: சில நேரங்களில், எளிமையானது சிறந்தது. உங்கள் தளவமைப்புகளை அதிகமாக சிக்கலாக்குவதைத் தவிர்க்கவும். எளிமையான தளவமைப்புகளைப் பராமரிப்பது, சரிசெய்வது மற்றும் வலுவாக இருக்க அதிக வாய்ப்புள்ளது.

முடிவுரை

CSS கட்ட கட்டமைப்பு வரிசைப்படுத்தல் கட்ட உருப்படிகளை நிலைப்படுத்துவதற்கும் பதிலளிக்கக்கூடிய தளவமைப்புகளை வடிவமைப்பதற்கும் சக்திவாய்ந்த மற்றும் பல்துறை கருவிகளின் தொகுப்பை வழங்குகிறது. வெவ்வேறு சீரமைப்பு பண்புகள், அவற்றின் பல்வேறு மதிப்புகள் மற்றும் அவை எவ்வாறு தொடர்பு கொள்கின்றன என்பதைப் புரிந்துகொள்வதன் மூலம், பார்வைக்கு ஈர்க்கக்கூடியவை மட்டுமல்லாமல், உலகளாவிய பார்வையாளர்களுக்கு செயல்பாட்டு மற்றும் அணுகக்கூடிய வலைத்தளங்களை உருவாக்க முடியும். ட்ராக் சீரமைப்பை மாஸ்டரிங் செய்வது, வலை உருவாக்குநர்கள் மிகவும் அதிநவீன மற்றும் மாற்றியமைக்கக்கூடிய வடிவமைப்புகளை உருவாக்க உதவுகிறது, பயனர் அனுபவத்தை மேம்படுத்துகிறது, பயனரின் இருப்பிடம் அல்லது சாதனம் எதுவாக இருந்தாலும். இந்த கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள கொள்கைகளை பதிலளிக்கக்கூடிய வடிவமைப்பு மற்றும் அணுகல்தன்மைக்கு அர்ப்பணிப்புடன் இணைப்பதன் மூலம், அனைவருக்கும் விதிவிலக்கான வலை அனுபவங்களை உருவாக்குவதற்கு நீங்கள் நன்கு தயாராக இருப்பீர்கள்.